<template>
	<view>
		<nav-bar></nav-bar>
		<view class="login">
			<view class="login-info">
				<view class="title">
					<view class="name">欢迎登录</view>
				</view>
				<view class="icon iconfont iconyonghutouxiang denglu">
					<input placeholder-class="input-text" class="input-class" v-model="userName" type="text" placeholder="请输入姓名" @blur="onBlurUser">
				</view>
				<view class="icon iconfont iconmima mima">
					<input placeholder-class="input-pw" class="input-class" v-model="passWord" type="password" placeholde="请输入密码" @blur="onBlurPW">
				</view>
				<view class="btn-in"  @tap="onSubmin">
					<button class="btn" type="default">登录</button>
				</view>
				
			</view>
			<view class="icon iconfont iconkaiji" @click="$refs.popup.open()"></view>
		</view>
		<uni-popup ref="popup" type="center">
			<switch-log @onCQ="onCQ" @onClose="$refs.popup.close()"></switch-log>
		</uni-popup>	
	</view>
</template>

<script>
	const module = uni.requireNativePlugin('uniplugin_module-release')
	import { mapState } from 'vuex'
	import { loadLogin , getCabinet } from '../../utils/api.js'
	import NavBar from '../../components/common/nav-bar.vue'
	import SwitchLog from '../../components/login/switch.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components:{
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			uniNavBar,
			SwitchLog,
			NavBar
		},
		computed:{
			...mapState(['mainCabinet'])
		},
		data() {
			return {
				userName: 'scTest1',  //明文输入框value
				passWord: '123456' // 密码输入框value
			}
		},
		onLoad() {},
		methods: {
			onBlurUser() {
				if (this.userName.trim() == "" && this.userName == undefined) {
					uni.showToast({
						title: '名字不能为空！',
						position: "top" 
					})
					this.userName = ''
					return;
				}else if (this.userName.length > 7) { 
					uni.showToast({
						title: '名字最长不能超过7位！',
						position: "top"
					}) 
					this.userName = ''
					return;
				}
			},
			onBlurPW() {
				if (this.passWord.length < 6) { 
					uni.showToast({
						title: '密码不能少于6位！',
						position: "top"
					})
					this.passWord = ''
					return;
				} else if (this.passWord.length > 16) { 
					uni.showToast({
						title: '密码最长不能超过16位！',
						position: "top"
					}) 
					this.passWord = ''
					return;
				}else if(this.passWord.trim() == '' && this.passWord==undefined) {
					uni.showToast({
						title: '密码不能为空！',
						position: "top" 
					})
					this.passWord = ''
					return;
				}
			},
			onSubmin() {
				try{
					let token = null
					uni.showToast({
						title: '登录中...'
					})
					console.log(this.mainCabinet)
					loadLogin({
						loginMode:0,  //登录模式：0-账户/密码；1-指纹；2-刷卡
						userName:this.userName, //用户名，如果非账户/密码登录，可为空
						password:this.passWord, //密码；如果非账户/密码登录，可为空
						phoneNumber:this.userName, //用户名、手机号选择之一。
						fPFeature:'', //指纹特征数据，指纹登录时必填
						cardNumber:'',//卡号，刷卡登录；刷卡登录时必填
						terminalId:this.mainCabinet.terminalId
					}).then(res=>{
						console.log(res.data);
						if(res.data.userId){
							uni.showToast({
								title: '登录成功',
								image: '../../static/chenggong1.png', 
								success:() => {
									//获取柜子基础信息
									getCabinet({terminalId:this.mainCabinet.terminalId}).then(re=>{
										console.log(re)
										let tokenData={}
										Object.assign(tokenData,this.mainCabinet,res.data,re.data);
										console.log(tokenData)
										tokenData.time=(new Date()).getTime()
										module.writeCoil({ //写入状态(更改)
											'saveId':(new Date()).getTime(),
											'start':this.mainCabinet.door_id-1, // 判断那个柜子的
											'value':true  //判断柜门开着还关，false表示打开柜门
										},(res1)=>{
											console.log("writeCoil",res1)
										})
										this.$store.dispatch('setToken',tokenData)										
										uni.redirectTo({
											url: `../index/index`
										})
									})
								}
							})
						} 
					})
					
				}catch(err){
					console.log(err,1111111);
					uni.showToast({ 
						title: '用户名或密码错误'
					})
				}	
			},
			onCQ() {
				uni.redirectTo({
					url: "../welcome-login/welcome-login"
				})
			}
				
		}
	}
</script>

<style scoped lang="less">
.input-class{
	color: #777777;
	font-size: 48rpx;
	margin-left: 40rpx;
}
.login{
	display: flex;
	justify-content: center;
	position: relative;
	background: url(../../static/background3.jpg) no-repeat;
	background-size: cover;
	// height: 385rpx;
	height: 1384rpx;
	.login-info{
		position: relative;
		z-index: 3;
		.title{
			margin-top: 220rpx;
			margin-bottom: 146rpx;
			text-align: center;
			.name{
				color: #FFFFFF;
				font-size: 80rpx;
				letter-spacing: 16rpx;
			}
		}
		.denglu{
			display: flex;
			align-items: center;
			border: 1rpx solid #4FC3FD;
			border-radius: 124rpx;
			margin-bottom: 80rpx;
			background: #FFFFFF;
			width: 940rpx;
			height: 124rpx;
			.input-text{
				font-size: 48rpx;
				color: #BBBBBB;
			}
		}
		.iconyonghutouxiang{
			padding-left: 60rpx;
			color: #6BBCFF;
			font-size: 60rpx;
		}
		.mima{
			display: flex;
			align-items: center;
			border: 1rpx solid #4FC3FD;
			border-radius: 124rpx;
			margin-bottom: 140rpx;
			background: #FFFFFF;
			width: 940rpx;
			height: 124rpx;
			.input-pw{
				font-size: 48rpx;
				color: #BBBBBB;
			}
		}
		.iconmima{
			padding-left: 60rpx;
			color: #6BBCFF;
			font-size: 60rpx;
			
		}
		.btn-in{
			display: flex;
			justify-content: center;
			align-items: center;
			// margin-bottom: 82rpx;
			.btn{
				display: flex;
				justify-content: center;
				align-items: center;
				background:linear-gradient(11deg, rgba(255, 184, 122, 1), rgba(251, 121, 89, 1), rgba(255, 154, 114, 1));
				color: #FFFFFF;
				width: 600rpx;
				height: 150rpx;
				border-radius: 128rpx;
				font-size: 68rpx;
			}
			
		}
	}
	.iconkaiji{
		position: absolute;
		left: 64rpx;
		bottom: 52rpx;
		color: #FFFFFF;
		font-size: 75rpx;
		z-index: 2;
	}
	
}
</style>
